<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!--toastr-->
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/bootstrapStyle.css}" type="text/css">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <style type="text/css">
        .lm_dlg .lm_cnt {
            overflow: hidden;
            width: 100%;
            *width: 99%;
            height: 340px;
        }

        .lm_cnt {
            border: 1px solid #B3B3B3;
            background-color: #fff;
        }

        .lm_dlg .lm_panel {
            height: 305px;
        }

        .lm_dlg a.lm_raddr {
            padding: 4px 8px;
        }

        a.lm_addr, a.lm_addr:link, a.lm_addr:visited {
            background: #fff;
            display: block;
            color: #494949;
            text-decoration: none;
            text-align: left;
            height: 20px;
            line-height: 20px;
            padding: 0 0 0 30px;
            white-space: nowrap;
            width: auto;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
            outline: none;
        }

        .lm_raddr .mov {
            float: right;
            margin-top: 2px;
            border: none;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>
<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>

    <!--页码代码-->
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">群组管理</a></li>
                <li class="breadcrumb-item active">用户管理</li>
            </ul>
        </div>
    </div>
    <section>
        <div class="container-fluid">
            <!-- Page Header-->
            <div class="row">
                <div class="col-lg">
                    <div class="card">
                        <div class="card-header">
                            <h4><p th:text="${group.groupName}+ -用户列表"></p></h4>
                        </div>

                        <div class="col-lg-12">
                            <div class="card">
                                <!--<div class="card-header d-flex align-items-center">-->
                                <!--&lt;!&ndash;<h4>查询</h4>&ndash;&gt;-->
                                <!--</div>-->
                                <div class="card-body">
                                    <form class="form-inline" th:action="@{/sms/groupUser/list}" method="post">
                                        <div class="form-group col-lg-4 mb-3">
                                            <label for="userName" class="col-sm-3 mr-3">姓名</label>
                                            <input id="userName" type="text" placeholder="" class="mr-3 col-sm-7
                                            form-control form-control" name="userName" th:value="${userName}">
                                        </div>
                                        <div class="form-group col-lg-4 mb-3">
                                            <label for="userPhone" class="col-sm-3 mr-3">电话</label>
                                            <input id="userPhone" type="text" placeholder="" class="mr-3 col-sm-7
                                            form-control form-control" name="userPhone" th:value="${userPhone}">
                                        </div>
                                        <div class="form-group col-lg-4 mb-3 pull-right">
                                            <input type="hidden" th:value="${groupCurrentPage}"
                                                   id="groupCurrentPage" name="groupCurrentPage">
                                            <input type="hidden" th:value="${groupId}"
                                                   id="groupId" name="groupId">
                                            <input type="submit" value="查询" class="col-sm-3 mr-3 btn btn-primary">
                                            <input id="clearBtn" type="button" value="重置"
                                                   class="col-sm-3 mr-3 btn btn-success">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--tables start -->
                        <div class="col-lg-12 grid-margin stretch-card">
                            <div class="card">
                                <div class="card-header d-flex align-items-center ">
                                    <a href="javascript:void(0)" data-toggle="modal"
                                       data-target="#modalCustom"
                                       class="btn btn-info">添加自定义用户</a>
                                    <a href="javascript:void(0)" onclick="turnUserAdd()"
                                       class="btn btn-info ml-3">添加通讯录用户</a>
                                    <a href="javascript:void(0)"
                                       onclick="deleteGroupUserArray()" class="btn btn-danger ml-3">批量清除</a>
                                    <a th:href="@{${groupUrl}}" class="btn btn-secondary  ml-3">返回上一级</a>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered">
                                            <thead>
                                            <td class="tc  text-center" style="width: 10%;">
                                                <input type="checkbox" id="selectAll"/>全选
                                            </td>
                                            <td class="tc text-center" style="width: 10%;">序号</td>
                                            <td class="tc text-center " style="width: 25%;">姓名</td>
                                            <td class="tc  text-center " style="width: 25%;">电话</td>
                                            <td class="tc  text-center" style="width: 30%;">操作</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="data,loopStatus:${data.content}">
                                                <td class="tc  text-center">
                                                    <input type="checkbox" th:value="${data.id}"
                                                           th:class="${data.userName}"/>
                                                </td>
                                                <td class="tc" th:text="${loopStatus.count}"></td>
                                                <td class="tc" th:text="${data.userName}"></td>
                                                <td class="tc" th:text="${data.userPhone}"></td>
                                                <td class="tc">
                                                    <a href="javascript:void(0)" data-toggle="modal"
                                                       data-target="#modalCenter"
                                                       th:onclick="deleteGroup([[${data.id}]],[[${data.userName}]])"
                                                       class="Cor_blue">删除</a>
                                                    <input type="hidden" th:value="${currentPage}" id="currentPage"/>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-lg-6 float-none float-sm-left">
                                        <small
                                                th:text="'共'+${data.totalElements}+'条记录，每页'+${data.size}+'条,共'+${data.totalPages}+'页'"></small>
                                    </div>
                                    <div th:replace="~{/pages/common/pagination.html :: page(${data.number}+1, ${data.totalPages}, ${url}, 'currentPage') }"></div>
                                </div>
                            </div>
                        </div>
                        <!--tables end -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--页码-->
    <div th:replace="~{/pages/common/foot.html}"></div>
</div>

<!-- 删除Modal -->
<div class="modal fade" id="modalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle1">删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body ">
                <input value="" class="del_groupUser_id" type="hidden">
                <p class="del_message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary delSure" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 批量删除Modal -->
<div class="modal fade" id="modalDeleteArray" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalTitle1">批量删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body ">
                <input value="" class="del_groupUserArray_id" type="hidden">
                <p class="del_array_message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary delArraySure" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalCustom" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">添加自定义用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body ">
                <form class="form-horizontal" method="post" id="customForm">
                    <div class="form-group row">
                        <label class="col-sm-3 form-control-label" style="padding-left: 40px;padding-top: 10px">姓名<em
                                style="color: red;">*</em></label>
                        <div class="col-sm-7">
                            <input type="text" placeholder="" name="userName" id="customUserName" class="form-control"/>
                        </div>
                    </div>
                    <div class="line"></div>

                    <div class="form-group row">
                        <label class="col-sm-3 form-control-label" style="padding-left: 40px;padding-top: 10px">电话 <em
                                style="color: red;">*</em></label>
                        <div class="col-sm-7">
                            <input type="text" placeholder="" name="userPhone" id="customUserPhone"
                                   class="form-control"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary addFreeUser" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->

</body>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"></script>
<!--<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>-->
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<!--<script th:src="@{/js/charts-home.js}"></script>-->
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.exedit.js}"></script>
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script type="text/javascript">
    toastr.options = {
        closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
        debug: false, //是否为调试；
        progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
        positionClass: "toast-top-center", //消息框在页面显示的位置
        onclick: null, //点击消息框自定义事件
        showDuration: "300", //显示动作时间
        hideDuration: "1000", //隐藏动作时间
        timeOut: "2000", //自动关闭超时时间
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };
    $("#clearBtn").click(function () {
        window.location.href = $appName + "/sms/groupUser/list?groupId=" + $("#groupId").val();
    })

    function turnUserAdd() {
        window.location.href = $appName + "/sms/groupUser/add?groupId=" + $("#groupId").val() + "&groupCurrentPage=" + $("#groupCurrentPage").val();
    }


    function deleteGroup(id, name) {
        $(".del_groupUser_id").val(id);
        $(".del_message").text("是否确认删除群组中用户'" + name + "'?");
    }

    function deleteGroupUserArray() {
        var selLength = $("tbody input:checked").length;
        if (selLength <= 0) {
            toastr.error("请勾选需要删除的用户");
            return false;
        }

        var ids = [];
        var names = [];
        $("tbody input:checked").each(function (i) {
            ids.push($(this).val());
            names.push($(this)[0].className);
        });
        $(".del_groupUserArray_id").val(ids);
        $(".del_array_message").text("是否确认批量删除群组中用户'" + names + "'?");
        $('#modalDeleteArray').modal('show');
    }

    //确认删除方法
    $(".delSure").click(function () {
        let id = $(".del_groupUser_id").val();
        $.requestAjax({
                url: $appName + "/sms/groupUser/delete",
                type: "post",
                data: {"id": id},
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            window.location.reload();//刷新当前页面.
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            }
        )
    })
    //确认删除方法
    $(".delArraySure").click(function () {
        debugger;
        let id = $(".del_groupUserArray_id").val();
        $.requestAjax({
                url: $appName + "/sms/groupUser/deleteAll",
                type: "post",
                data: {"ids": id},
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            window.location.reload();//刷新当前页面.
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            }
        )
    })

    //添加自定义用户
    $(".addFreeUser").click(function () {
        debugger;
        let id = $("#groupId").val();
        var json = {};
        json.userName = $("#customUserName").val().trim();
        if (json.userName == null || json.userName == '') {
            toastr.error("姓名不可为空");
            return false;
        }
        json.userPhone = $("#customUserPhone").val().trim();
        if (json.userPhone == null || json.userPhone == '') {
            toastr.error("电话不可为空");
            return false;
        }
        if (!checkPhone(json.userPhone)) {
            toastr.error("手机号不合法，请重新输入");
            return false;
        }
        var checkNameFlag = checkUserPhoneByGroup(id, json.userPhone);
        debugger;
        if (checkNameFlag) {
            toastr.error("该群组下手机号已存在");
            return false;
        }

        json.groupId = id;
        json.userFlag = 1;
        $.requestJsonAjax({
                url: $appName + "/sms/groupUser/saveOne",
                type: "post",
                data: json,
                success: function (result) {
                    if (result.success) {

                        debugger;
                        toastr.success(result.msg);
                        setTimeout(function () {
                            window.location.reload();//刷新当前页面.
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            }
        )
    })

    /*
        function checkUserNameByGroup(groupId, userName) {
            var flag = false;
            $.requestAjax({
                    url: $appName + "/sms/groupUser/checkUserNameByGroup",
                    type: "post",
                    data: {"groupId": groupId, "userName": userName},
                    success: function (result) {
                        if (result.success) {
                            flag = true;
                        }
                    }
                }
            )
            return flag;
        }*/

    function checkUserPhoneByGroup(groupId, userPhone) {
        var flag = true;
        $.requestAjax({
                url: $appName + "/sms/groupUser/checkUserPhoneByGroup",
                type: "post",
                async: false,//改成同步
                data: {"groupId": groupId, "userPhone": userPhone},
                success: function (result) {
                    if (!result.success) {
                        flag = false;
                    }
                }
            }
        )
        return flag;
    }

    //这个方法可以替代toggle()   toggle()在jQuery 1.9中已经移除
    //两个函数的绑定
    var i = 0;
    //全选
    $("#selectAll").on("click", function () {
        if (i == 0) {
            //把所有复选框选中
            $(".table td :checkbox").prop("checked", true);
            i = 1;
        } else {
            $(".table td :checkbox").prop("checked", false);
            i = 0;
        }

    });
    $("tbody input:checkbox").on('click', function () {
        //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
        if ($("tbody input:checkbox").length === $("tbody input:checked").length) {
            $("#selectAll").prop("checked", true);
        } else {
            $("#selectAll").prop("checked", false);
        }
    })

</script>
</html>